<template>
    <div>
        <el-container>
            <el-aside width="200px">
                <div class="logo">
                    <img src="@/assets/images/logo.png" />
                    <h3>e店邦O2O平台</h3>
                </div>
                <el-menu active-text-color="#409EFF" background-color="#304156" class="el-menu-vertical-demo"
                    default-active="/index" text-color="#fff" @open="handleOpen" @close="handleClose" router>
                    <el-menu-item index="/index">
                        <el-icon><icon-menu /></el-icon>
                        <span>首页</span>
                    </el-menu-item>
                    <el-sub-menu :index="item.path" v-for="item in store.menus">
                        <template #title>
                            <el-icon>
                                <location />
                            </el-icon>
                            <i class="iconfont" :class="item.meta.icon"></i>
                            <span>{{ item.meta.title }}</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item :index="item.path + '/' + sub.path" v-for="sub in item.children">{{
                                sub.meta.title
                            }}</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header>Header</el-header>
                <el-main>
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import {
    Menu as IconMenu,
    Location,
} from '@element-plus/icons-vue'

import { getInfoAPI } from "./api"
import { useRouter } from "@/pinia"
const store = useRouter()
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
getInfoAPI()
</script>

<style lang="less" scoped>
:deep(.el-aside) {
    height: 100vh;
    background-color: #304156;

    &::-webkit-scrollbar {
        width: 0;
    }

    .logo {
        display: flex;
        align-items: center;
        justify-content: center;

        h3 {
            height: 50px;
            font-size: 14px;
            line-height: 50px;
            color: #fff;
        }

        img {
            width: 32px;
            height: 32px;
            margin-right: 10px;
        }
    }

}

:deep(.el-header) {
    width: calc(100vw - 200px);
    height: 84px;

    background-color: #fff;
}

:deep(.el-main) {
    width: calc(100vw - 200px);
    background-color: red;
}
</style>